import React from "react";
import styles from './uc-navBar.module.css'
import propsTypes from 'prop-types'
import { withRouter } from "react-router-dom";

class UcnavBar extends React.Component {
    static defaultProps = {
        model: 'dark',
        onLeftClick: () => null
    };
    static propsTypes = {
        model: propsTypes.string,
        onLeftClick: propsTypes.func,
        icon: propsTypes.node //要求icon传入的时候是react组件/jsx元素的调用
    };

    render() {
        let { model, onLeftClick, children, icon } = this.props
        return (
            <div className={`${styles.nav} ${styles[`nav--${model}`]}`}>
                <div className={styles.arrow}>
                    <div onClick={onLeftClick} className={styles.arrow}>{icon}</div>
                    {children}
                </div>
            </div>
        )
    }
}

export default withRouter(UcnavBar)